<template>
  <div>
    <ul>
      <li
        v-for="item of todoList"
        :key="item.id"
      >
        <input type="checkbox"
          :checked="item.completed"
          @change="toggleTodo(item.id)"
        >
        <span :style="{ textDecoration: item.completed ? 'line-through' : 'none'}">{{item.content}}</span>
        <button @click="removeTodo(item.id)">REMOVE ITEM</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TodoLists',
  props: {
    todoList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  emits: ['onToggleTodo', 'onRemoveTodo'],
  setup(props, { emit }) {
    const toggleTodo = (id) => {
      emit('onToggleTodo', id);
    }

    const removeTodo = (id) => {
      emit('onRemoveTodo', id);
    }

    return {
      toggleTodo,
      removeTodo
    }
    
  }
}
</script>

<style>

</style>